<template>
  <div class="home">
    <topBar></topBar>
    <el-row>
      <el-col :span="16" :offset="4">
        <!-- 轮播图  -->
        <div class="block slid">
          <el-carousel height="500px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <img :src="item" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
      <!--   数码时尚     -->
      <el-col :span="16" :offset="4">
        <cardItem :commodity="fashion" cardName="时尚数码"></cardItem>
      </el-col>

      <!--   品质生活     -->
      <el-col :span="16" :offset="4">
        <cardItem :commodity="quality" cardName="品质生活"></cardItem>
      </el-col>

      <!--   最新商品     -->
      <el-col :span="16" :offset="4">
        <latestCard :newest="newest"></latestCard>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import cardItem from '~/components/cardItem.vue'
  import latestCard from '~/components/latestCard.vue'
  import topBar from '~/components/topBar.vue'
  import * as homeRequest from '../assets/home/home'

  export default {
    components: {
      topBar,
      cardItem,
      latestCard,
    },
    data() {
      return {
        count: 1,
        imgs: [
          'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/smart/slideshow/slideshow-3-1140x500.png',
          'http://theme.opencartdemo.cn/smart-3200-free/image/cache/catalog/smart/slideshow/slideshow-4-1140x500.png'
        ],
        newest: [],
        fashion: [],
        quality: []
      }
    },
    methods: {},
    async mounted() {
      await homeRequest.getFashionAndQuality(this);
      await homeRequest.getNewestCommodity(this);
    }
  };
</script>

<style lang="less">
  .home {
    .slid {
      margin-bottom: 30px;
    }
  }
</style>
